﻿<!DOCTYPE html>
<html>
	<head>
		<title>Working with Zeptojs</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="Working with Zeptojs" />
		<meta name="keywords" content="javascript, dynamic, grid, layout, zepto"/>
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="../freewall.js"></script>
		<style type="text/css">
			.layout {
				margin: 2em 15px;
				color: #333;
			}
			.size320 {
				width: 320px;
				height: 320px;
			}
			.size44 {
				width: 100%;
				height: 100%;
			}
			.size22 {
				width: 50%;
				height: 50%;
			}
			.size14 {
				width: 25%;
				height: 100%;
			}
			.size41 {
				width: 100%;
				height: 25%;
			}
			.size24 {
				width: 50%;
				height: 100%;
			}
			.size42 {
				width: 100%;
				height: 50%;
			}
		</style>
	</head>
	<body>
		<div class='header'>
			<div class="clearfix">
				<div class="float-left">
						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
						<div class='target'>Creating dynamic grid layouts.</div>
				</div>
			</div>
		</div>
		<div class="layout">
			<div class="free-wall">
				<div class="size320" data-nested=".level-1" data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
					<div class="brick level-1 size24"></div>
					<div class="brick level-1 size24"></div>
				</div>
				<div class="size320" data-nested=".level-1"  data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
					<div class="brick level-1 size42"></div>
					<div class="brick level-1 size42"></div>
				</div>
				<div class="size320" data-nested=".level-1"  data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
					<div class="brick level-1 size24"></div>
					<div class="brick level-1 size22"></div>
					<div class="brick level-1 size22"></div>
				</div>
				<div class="size320" data-nested=".level-1" data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
					<div class="brick level-1 size42"></div>
					<div class="brick level-1 size22"></div>
					<div class="brick level-1 size22"></div>
				</div>
				<div class="size320" data-nested=".level-1"  data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
					<div class="brick level-1 size22"></div>
					<div class="brick level-1 size24"></div>
					<div class="brick level-1 size22"></div>
				</div>
				<div class="size320" data-nested=".level-1"  data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
					<div class="brick level-1 size22"></div>
					<div class="brick level-1 size22"></div>
					<div class="brick level-1 size22"></div>
					<div class="brick level-1 size22"></div>
				</div>
			</div>
		</div>

		<script type="text/javascript">

			var colour = [
				"rgb(142, 68, 173)",
				"rgb(243, 156, 18)",
				"rgb(211, 84, 0)",
				"rgb(0, 106, 63)",
				"rgb(41, 128, 185)",
				"rgb(192, 57, 43)",
				"rgb(135, 0, 0)",
				"rgb(39, 174, 96)"
			];

			$(".free-wall .size320").each(function() {
				var backgroundColor = colour[colour.length * Math.random() << 0];
				var bricks = $(this).find(".brick");
				!bricks.length && (bricks = $(this));
				bricks.css({
					backgroundColor: backgroundColor
				});
			});

			$(function() {
				$(".free-wall").each(function() {
					var wall = new Freewall(this);
					wall.reset({
						selector: '.size320',
						cellW: 320,
						cellH: 320,
						fixSize: 0,
						gutterY: 20,
						gutterX: 20,
						onResize: function() {
							wall.fitWidth();
						}
					})
					wall.fitWidth();
				});
				$(window).trigger("resize");
			});

		</script>

	</body>
</html>
